<template>
    <div class="nav"  :style="{backgroundImage: 'url('+bgimg+')',minWidth:'100%',height:'280px',backgroundSize:'cover'}">
      <!-- 导航栏pc端 -->
      <el-row class="hidden-md-and-down">
        <el-col :lg="5" :offset="2">
          <router-link to="/main"><img  alt="" class="logo"/></router-link>
        </el-col>
        <el-col :lg="7" :offset="10" class="logoRight" v-show="!shows" style="marginTop:10px">
          <router-link to="/login"><img :src="people" class="icons" alt=""/>&nbsp;<span @click="loginto(true)">登录</span></router-link>
          <router-link to="/login"><img :src="login"  class="icons" alt=""/>&nbsp;<span @click="loginto(false)">注册</span></router-link>
          <span>|| English switch</span>
        </el-col>
        <el-col :lg="7" :offset="10" class="logoRight" v-show="shows" style="height:45px;lineHeight:45px;marginTop:10px">
          <el-avatar src="https://avatars0.githubusercontent.com/u/47131504?s=64&v=4" alt=""></el-avatar>&nbsp;<span>{{getName}}</span>
          <span @click="logOut">退出</span>
          <span>|| English switch</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="17" class="hidden-md-and-down" :offset="7">
          <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal">
            <el-menu-item class="navPC" index="/main"><img :src="shouye" class="icon"/>首页</el-menu-item>
            <el-menu-item class="navPC" index="/people"><img :src="laji" class="icon"/>管理后台</el-menu-item>
            <el-menu-item class="navPC" index="/garbage"><img :src="laji" class="icon"/>比赛信息</el-menu-item>
            <el-menu-item class="navPC" index="/fabu"><img :src="laji" class="icon"/>比赛发布</el-menu-item>
            <el-menu-item class="navPC" index="/write"><img :src="laji" class="icon"/>文章编写</el-menu-item>
            

            <el-menu-item class="navPC" index="/game"><i class="el-icon-edit icon" style="fontSize:25px;color:#14a53b"></i>文章查阅</el-menu-item>
            <el-menu-item class="navPC" index="/personalCenter"><img :src="people" class="icon"/>个人中心</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>

    <!-- 导航栏移动端 -->
    <el-row class="hidden-lg-and-up">
      <el-col :span="10">
        <router-link to="/main"><img :src="logoSmall" style="100%" alt=""></router-link>
      </el-col>
     <el-col :span="4" :offset="9">
        <span style="font-family:Comic Sans MS;font-size:14px;"><div class="menu-icon" @click="drawer = true" type="primary"></div></span>
     </el-col>
     <!-- 抽屉内容 -->
      <el-drawer
        :visible.sync="drawer"
        :direction="direction"
        size='60%'
        :before-close="handleClose">
        <el-row class="tac">
          <el-col :span="24">
             <div class="block" style="textAlign:center"><el-avatar :size="100" :src="getAvatar"></el-avatar></div>
            <p v-if="getShow" style="textAlign:center"><span>{{getName}}</span>&nbsp;&nbsp;<span @click="logOut">退出</span></p>
            <el-menu
              :default-active="activeIndex"
              router
              class="el-menu-vertical-demo"
              style="textAlign:center"
              >
              <router-link style="marginLeft:10px" to="/login" v-if="!getShow"><img :src="people" class="icons" alt=""/>&nbsp;<span @click="loginto(true)">登录</span></router-link>
              <router-link to="login" v-if="!getShow"><img :src="login"  class="icons" alt=""/>&nbsp;<span @click="loginto(false)">注册</span></router-link>
              <el-menu-item index="/main">
                <span slot="title">首页</span>
                <span class="el-icon-arrow-right" style="float:right;lineHeight:56px"></span>
              </el-menu-item>
              <el-menu-item index="/new">
                <span slot="title">新闻</span>
                <span class="el-icon-arrow-right" style="float:right;lineHeight:56px"></span>
              </el-menu-item>
              <el-menu-item index="/garbage">
                <span slot="title">垃圾分类</span>
                <span class="el-icon-arrow-right" style="float:right;lineHeight:56px"></span>
              </el-menu-item>
              <el-menu-item index="/game">
                <span slot="title">分类答一答</span>
                <span class="el-icon-arrow-right" style="float:right;lineHeight:56px"></span>
              </el-menu-item>
              <el-menu-item index="personalCenter">
                <span slot="title">个人中心</span>
                <span class="el-icon-arrow-right" style="float:right;lineHeight:56px"></span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-drawer>
    </el-row>

      <!-- 搜索框 -->
    <el-row class="pad">
          <el-col :lg="6" class="hidden-md-and-down" :offset="8">
              <el-input class="search" v-model="input" placeholder="查询比赛内容" @keyup.enter.native="searchLaji" :disabled="searchFa"></el-input>
          </el-col>
          <el-col :lg="2" class="hidden-md-and-down">
              <el-button @click="searchLaji" :disabled="searchFa"><i class="el-icon-search"></i><span class="souText">搜索</span></el-button>
          </el-col>
          <!-- 搜索移动端 -->
          <el-col :span="15" class="hidden-lg-and-up" :offset="1">
              <el-input class="search" v-model="input" placeholder="查询比赛内容" :disabled="searchFa"></el-input>
          </el-col>
          <el-col :span="7" class="hidden-lg-and-up">
            <el-tooltip class="item" effect="dark" content="最快两秒提交一次" placement="top">
              <el-button @click="searchLaji" :disabled="searchFa"><i class="el-icon-search"></i><span class="souText">搜索</span></el-button>
            </el-tooltip>
          </el-col>
      </el-row>
    </div>
</template>
<script>
import shouye from '@/assets/images/8_03.png'
import news from '@/assets/images/8_08.png'
import laji from '@/assets/images/8_05.png'
import jiandu from '@/assets/images/8_11.png'
import people from '@/assets/images/_0.png'
import logo from '@/assets/images/index_03.png'
import login from '@/assets/images/index_06.png'
import bgimg from '@/assets/images/mmm.jpg'
import logoSmall from '@/assets/images/logoSmall.png'

import axios from 'axios'
export default {
  name: 'navigation',
  data() {
    return {
      shouye,
      news,
      bgimg,
      laji,
      searchFa:false,
      jiandu,
      people,
      logo,
      login,
      denglu:true,
      zhuce:false,
      logoSmall,
      input: '',
      shows: false,
      drawer: false,
      direction: 'ltr',
      avatar:this.$store.state.avatar,
      navBg:{
          backgroundImage: 'url(' + require('@/assets/images/index_01.jpg') + ')',
          backgroundRepeat:'no-repeat',
          backgroundSize:'100% 100%'
      },
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    searchLaji(){
      this.searchFa=true;
      axios.get("http://127.0.0.1:8000/api/GarbageViewset/",{
          params:{
            "search": this.input
          }
      })
      .then((res)=>{
        // console.log(res);
        setTimeout(() =>{
            this.searchFa=false
        },2000);
        this.$notify({
          title: res.data.results[0].garbage_type,
          message: res.data.results[0].garbage_bin,
        });
      })
      .catch((error)=>{
        setTimeout(() =>{
            this.searchFa=false
        },2000);
        this.$notify({
          title: "emmmm",
          message: "我们还没有找到哦"
        });
      })
    },
    // 关闭抽屉
    handleClose(done) {
        done();
    },
    loginto(aaa){
      // console.log(aaa);
      this.$store.commit("madeLoginShow",aaa);
    },
    // 退出
    logOut(){
      this.$confirm("确定退出吗?","提示",{
        confirmButtonText: "确定",
        cancleButtonText: '取消',
      }).then(()=>{
        localStorage.removeItem('token');
        localStorage.removeItem('id');
        this.$store.commit("madeShow",false);
        this.$store.commit("changeName","");
        this.$store.commit("changeId","");
        this.$store.commit("changeAvatar","");
        this.$store.commit("changeuser_description","");
        this.$store.commit("getEmail","");
        this.$store.commit("changerealname","");
        this.$store.commit("getToken","");
        this.$router.push('/main');
        this.shows=false;
      }).catch((error)=>{
        // console.log(error.data.msg);
      })
    },
    //根据token获取用户信息
    getuserIn(){
      //http://127.0.0.1:8000/api/UserViewSet/
      axios.get("http://127.0.0.1:8000/api/UserViewSet/",{
          params:{
            uid:localStorage.getItem("id")
          }
      })
      .then((res)=>{
        //console.log("getuserIn");
        //console.log(res);
        this.$store.state.name=res.data.results.username;
        this.$store.state.avatar=res.data.results.photo;
      })
      .catch(function(error){
          console.log("error");
      })
    }
  },
  created() {
    if(localStorage.getItem("token")!=null){
      this.shows=true;
      this.getuserIn();
    }
  },
  //登录注册模块监听
  computed:{
    getName:function(){
      return this.$store.state.name;
    },
    getShow:function(){
      return this.shows;
    },
    getAvatar:function(){
      return this.$store.state.avatar;
    }
  }
}
</script>
<style scoped>
*{
  font-size: 20px;
}
.nav{
  width: 100%;
  background-color: #d4f9c5;
  padding-top: 5px;
  margin-bottom: 20px;
}
.logo{
  width: 100%;
  height: auto;
  max-width: 420px;
}
.logoRight{
  padding-top: 10px;
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
.icons{
  width: 15px;
}
.navPC{
  font-size: 18px;
  color: #14a53b;
  padding: 0 25px;
}
.el-menu{
  background-color:transparent;
  color: #14a53b;
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 2px solid #2ca41e;
  background-color:transparent;
}
.el-menu--horizontal>.el-menu-item:hover{
  background-color:transparent;
  color: #14a53b;
}
.el-menu--horizontal>.el-menu-item.is-active{
  color: #14a53b;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.little{
  font-size: 15px;
  padding: 0 15px;
}
.pad{
  padding-top: 30px;
}
.souText{
  color: #f2f2f2;
  font-size: 23px;
  height: 50%;
  line-height: 50%;
}
.el-button{
  height: 54px;
  width: 100%;
  padding: 0px;
}
.sou{
  height: 20px;
  font-size: 25px;
}
.search{
  width: 100%;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus{
  border: solid 1px #5ec74d;
}
.el-button{
  background-color: #5ec74d;
  border-radius:0 5px 5px 0;
  color: #f2f2f2;
  border: solid 1px #5ec74d;
}
.el-button:active,.el-button:focus,.el-button:hover{
  background-color: #5ec74d;
  border: solid 1px #5ec74d;
}
.menu-icon{
  width: 30px;
  height: 6px;
  border-top: 5px solid #5ec74d;
  border-bottom: 5px solid #5ec74d;
  background-color: #5ec74d;
  padding: 5px 0;
  background-clip:content-box;
  float: right;
}
.el-icon-search:before{
  color: #ffffff;
}
.el-input__inner{
  border-radius: 5px 5px 0px 0px !important;
}
</style>